<template>
	<view>
		<view class="billLists_box">
			<view class="month_msg">
				<view class="month">
					<view class="change_month_btn">本月 ↓</view>
				</view>
				<view class="income_expenses">
					<view class="income_expenses_item">
						支出 ￥ {{getYuan(zhi)}}
					</view>
					<view class="income_expenses_item">
						收入 ￥ {{getYuan(shou)}}
					</view>
				</view>
			</view>
			<view class="billLists" v-if="billLists.length > 0">
				<view class="bill" v-for="(item,index) in billLists" :key="index" @click="toDetails(item)">
					<view class="bill_icon">
						<image src="../../static/images/amount.png" mode="scaleToFill"></image>
					</view>
					<view class="bill_main">
						<view class="bill_msg">
							<view class="bill_title">{{item.accountSetName}}</view>
							<view class="bill_type">{{item.type}}</view>
							<view class="bill_date">{{item.changeTime}}</view>
						</view>
						<view class="bill_amount">{{getYuan(item.chgAmount)}}</view>
					</view>
				</view>
				<view style="height: 50rpx;display: flex;justify-content: center;align-items: center;">
					<text class="scroll_time">没有更多数据啦~</text>
				</view>
			</view>
			<view style="display: flex; justify-content: center;align-items: center;padding: 20rpx 0;" v-else>
				<text class="stu_item_txt" style="color: #D9D9D9;">目前还没有缴费记录!</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {regFenToYuan} from '../../common/js/utils.js'
	export default {
		onShow:function(){
			this._queryInExpDetail()
			this._getOrderList()
		},
		data(){
			return{
				billLists: [],
				zhengBillLists: [],
				fuBillLists: [],
				zhi: 0,
				shou: 0
			}
		},
		computed: {
			getYuan(str) {
				return function(str) {
					return regFenToYuan(str)
				}
			}
		},
		methods:{
			_getOrderList() {
				uni.request({
					method: 'POST',
					url: 'https://qiancheng.mynatapp.cc/common/biz/cloud/order/orderList',
					data: {
					},
					header: { 'content-type': 'application/json' },
					success: (res) => {
						console.log(res)
						if(res.data.code == 10000) {
							uni.hideLoading()
						} else {
							uni.hideLoading()
						}
					},
					fail: (err) => {
						uni.hideLoading()
						console.log(err)
					}
				})
			},
			_queryInExpDetail() {
				uni.showLoading({
					title: '加载中...'
				})
				let bizUserId = uni.getStorageSync('bizUserId')
				uni.request({
					method: 'POST',
					url: 'https://qiancheng.mynatapp.cc/common/biz/cloud/order/queryInExpDetail',
					data: {
						bizUserId: bizUserId,
						accountSetNo: '400193',
						dateStart: '2020-07-30',
						dateEnd: '2020-08-04',
						startPosition: 1,
						queryNum: 100
					},
					header: { 'content-type': 'application/json' },
					success: (res) => {
						if(res.data.code == 10000) {
							if(res.data.data != null) {
								this.billLists = res.data.data.inExpDetail
								this.zhengBillLists = res.data.data.inExpDetail.filter(item => item.chgAmount >0)
								this.fuBillLists = res.data.data.inExpDetail.filter(item => item.chgAmount <0)
								for(let i =0; i< this.zhengBillLists.length; i++) {
									this.zhi += this.zhengBillLists[i].chgAmount
								}
								for(let i =0; i< this.fuBillLists.length; i++) {
									this.shou += this.fuBillLists[i].chgAmount
								}
							}
							uni.hideLoading()
						} else {
							uni.hideLoading()
						}
					},
					fail: (err) => {
						uni.hideLoading()
						console.log(err)
					}
				})
			},
			toDetails(bill){
				uni.navigateTo({
					url: './billDetails'
				})
			}
		},
		onLoad(option) {
			
		}
	}
</script>
<style lang="scss" scoped>
	.billLists_box{
		position: relative;
	}
	.scroll_time {
		font-family: 'Arial Normal', 'Arial';
		font-weight: 400;
		font-size: 24rpx;
		color: #AAAAAA;
	}
	.month_msg{
		padding: 18rpx 36rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		background: #f6f6f6;
		position: sticky;
		top: 0;
		.change_month_btn{
			background: #FFF;
			padding: 0 12rpx;
			height: 42rpx;
			font-size: 26rpx;
			line-height: 42rpx;
			border-radius: 20rpx;
		}
		.income_expenses_item{
			font-size: 26rpx;
			color: #999;
			text-align: right;
		}
	}
	.bill{
		background-color: #FFF;
		display: flex;
		.bill_icon{
			width: 120rpx;
			padding: 36rpx 0;
			text-align: center;
			image{
				width: 56rpx;
				height: 56rpx;
			}
		} 
		.bill_main{
			border-bottom: 1px solid #f6f6f6;
			display: flex;
			width: calc(100vw - 120rpx);
			flex-direction: row;
			justify-content: space-between;
			padding: 24rpx 0;
			.bill_msg{
				width: 70%;
				line-height: 40rpx;
				.bill_title{
					font-size: 30rpx;
				}
				.bill_type{
					font-size: 26rpx;
				}
				.bill_date{
					font-size: 26rpx;
					color: #999;
				}
			}
			.bill_amount{
				width: 30%;
				font-size: 40rpx;
				font-weight: 600;
				padding-right: 24rpx;
				box-sizing: border-box;
				text-align: right;
			}
		}
		&:active{
			background-color: #f6f6f6;
		}
	}
</style>
